import React, { Component } from 'react'
import axios from "axios";
export default class Cinema extends Component {

    constructor() {
        super()
        this.state = {
            cinemaList: [],
            bakCinemaList: [] // 备份一个数组，用于实现前端筛选
        }

        // 使用 axios(第三方库，专门用于请求数据) 请求数据
        axios({
            url: 'https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=4853853',
            method: 'get',
            headers: {
                'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16735736022244038807781377","bc":"110100"}',

                'X-Host': 'mall.film-ticket.cinema.list'
            }
        }).then(res => {
            console.log('请求结果:', res.data.data.cinemas);
            this.setState({
                cinemaList: res.data.data.cinemas,
                bakCinemaList: res.data.data.cinemas,
            })
        }).catch(err => {
            console.log(err);
        })
    }

    // 后面讲的生命周期函数 更适合发送 ajax请求

    render() {
        return (
            <div>
                <input onInput={this.handleInput} />
                {this.state.cinemaList.map(item => (
                    <dl key={item.cinemaId}>
                        <dt>{item.name}</dt>
                        <dd>{item.address}</dd>
                    </dl>
                ))}
            </div>
        )
    }

    handleInput = (event) => {
        // console.log('输入框值', event.target.value);
        // 找到影院名称或地址中包含输入框内容的值，统一转换成大写
        let newList = this.state.bakCinemaList.filter(item => item.name.toUpperCase().includes(event.target.value.toUpperCase()) || item.address.toUpperCase().includes(event.target.value.toUpperCase()))
        // console.log('newList', newList);

        this.setState({
            cinemaList: newList
        })
        // cinemaList每次都会被重新覆盖

        // 问题：setState操作完，在后面拿到的状态还是未更新之前的，也就是说 setState是异步操作
    }
}


/**
 * 数组的filter方法
 */
// 返回数组中包含字符串a的项，得到一个新的数组
// let arr = ['aaa', 'abc', 'bcc']
// let newArr = arr.filter(item => item.includes('a'))
// console.log(newArr);